<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>给玥玥的惊喜</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #ff9a9e, #fad0c4, #a1c4fd);
            background-size: 400% 400%;
            animation: gradientBG 15s ease infinite;
            height: 100vh;
            overflow: hidden;
            position: relative;
        }
        
        @keyframes gradientBG {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        .popup {
            position: absolute;
            padding: 15px 25px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
            font-size: 18px;
            max-width: 220px;
            z-index: 1;
            text-align: center;
            line-height: 1.4;
            font-weight: 600;
            border: 2px solid rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(5px);
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
            opacity: 0;
            transform: scale(0.8);
        }
        
        .heart {
            position: absolute;
            font-size: 28px;
            opacity: 0;
            z-index: 0;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
        }
    </style>
</head>
<body>
    <script>
        // 温馨消息
        const messages = [
            "玥来玥乖💖",
            "天天开心😊",
            "好喜欢你❤️",
            "按时吃饭🍚",
            "多穿衣服🧥",
            "玥玥玥玥✨",
            "少喝酒🍷",
            "注意身体💪",
            "早早睡觉🌙",
            "想你了🌟",
            "爱你每一天💕",
            "有你真好🌈",
            "甜甜蜜蜜🍯",
            "永远在一起💑",
            "心心相印💞",
            "你是唯一💘",
            "幸福快乐🎉",
            "爱你到永远💝"
        ];
        
        // 颜色数组
        const colors = [
            "#ff6b6b", "#4a6cf7", "#07C160", "#ffa726", 
            "#9c27b0", "#00bcd4", "#8bc34a", "#e91e63",
            "#795548", "#607d8b", "#ff4081", "#7e57c2"
        ];
        
        // 创建弹窗
        function createPopup() {
            const popup = document.createElement('div');
            popup.className = 'popup';
            
            // 随机消息和颜色
            const text = messages[Math.floor(Math.random() * messages.length)];
            const color = colors[Math.floor(Math.random() * colors.length)];
            
            popup.textContent = text;
            popup.style.color = color;
            popup.style.borderColor = color;
            
            // 随机位置 - 确保覆盖整个屏幕
            const left = Math.random() * (window.innerWidth - 200);
            const top = Math.random() * (window.innerHeight - 100);
            
            popup.style.left = left + 'px';
            popup.style.top = top + 'px';
            
            document.body.appendChild(popup);
            
            // 随机动画参数
            const scale = 0.8 + Math.random() * 0.4;
            const duration = 3 + Math.random() * 4; // 3-7秒
            
            // 弹窗出现动画
            const showAnimation = popup.animate([
                { opacity: 0, transform: 'scale(0.8)' },
                { opacity: 1, transform: `scale(${scale})` }
            ], {
                duration: 500,
                easing: 'ease-out',
                fill: 'forwards'
            });
            
            // 随机移动路径
            const moveX = (Math.random() - 0.5) * 100;
            const moveY = (Math.random() - 0.5) * 100;
            
            // 弹窗移动动画
            const moveAnimation = popup.animate([
                { transform: `translate(0, 0) scale(${scale})` },
                { transform: `translate(${moveX}px, ${moveY}px) scale(${scale})` }
            ], {
                duration: duration * 1000,
                easing: 'ease-in-out',
                fill: 'forwards'
            });
            
            // 弹窗消失动画
            setTimeout(() => {
                popup.animate([
                    { opacity: 1, transform: `translate(${moveX}px, ${moveY}px) scale(${scale})` },
                    { opacity: 0, transform: `translate(${moveX}px, ${moveY}px) scale(0.7)` }
                ], {
                    duration: 800,
                    easing: 'ease-in',
                    fill: 'forwards'
                }).onfinish = () => {
                    if (popup.parentNode) {
                        popup.parentNode.removeChild(popup);
                    }
                };
            }, duration * 1000 - 800);
        }
        
        // 创建心形
        function createHeart() {
            const heart = document.createElement('div');
            heart.className = 'heart';
            heart.textContent = '❤️';
            
            // 随机位置
            const left = Math.random() * window.innerWidth;
            const top = Math.random() * window.innerHeight;
            
            heart.style.left = left + 'px';
            heart.style.top = top + 'px';
            
            document.body.appendChild(heart);
            
            // 随机动画参数
            const duration = 4 + Math.random() * 3; // 4-7秒
            const moveX = (Math.random() - 0.5) * 150;
            const moveY = (Math.random() - 0.5) * 150;
            
            // 心形出现动画
            heart.animate([
                { opacity: 0, transform: 'scale(0.5)' },
                { opacity: 0.8, transform: 'scale(1.2)' },
                { opacity: 0.7, transform: 'scale(1)' }
            ], {
                duration: 600,
                easing: 'ease-out',
                fill: 'forwards'
            });
            
            // 心形移动动画
            heart.animate([
                { transform: 'translate(0, 0)' },
                { transform: `translate(${moveX}px, ${moveY}px)` }
            ], {
                duration: duration * 1000,
                easing: 'ease-in-out',
                fill: 'forwards'
            });
            
            // 心形消失动画
            setTimeout(() => {
                heart.animate([
                    { opacity: 0.7, transform: `translate(${moveX}px, ${moveY}px) scale(1)` },
                    { opacity: 0, transform: `translate(${moveX}px, ${moveY}px) scale(0.5)` }
                ], {
                    duration: 1000,
                    easing: 'ease-in',
                    fill: 'forwards'
                }).onfinish = () => {
                    if (heart.parentNode) {
                        heart.parentNode.removeChild(heart);
                    }
                };
            }, duration * 1000 - 1000);
        }
        
        // 页面加载后开始动画
        window.onload = function() {
            // 初始创建弹窗和心形
            for (let i = 0; i < 12; i++) {
                setTimeout(() => {
                    createPopup();
                    if (i % 2 === 0) createHeart();
                }, i * 400);
            }
            
            // 持续创建弹窗
            setInterval(() => {
                createPopup();
            }, 900);
            
            // 持续创建心形
            setInterval(() => {
                createHeart();
            }, 1300);
        };
    </script>
</body>
</html>